<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>record</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="HandheldFriendly" content="true">
   <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='bootstrap.min.css')}}">

   <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="/static/echarts.min.js"></script>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:800%;margin-left:auto;margin-right:auto;"></div>
    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data1=({{ timecollect|safe}});
        var data2=({{profit}});
        var data3=({{net}});
        var data4=({{duonet}});
        var data5=({{duo}});
        var data6=({{kongnet}});
        var data7=({{kong}});
        

        // 指定图表的配置项和数据
        var option = {
            baseOption: {
        timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            top:50,
            data: ['实时盈亏','实时持仓','净多盈亏','净多持仓','净空盈亏','净空持仓']},
        calculable : true,
        grid: {
            top: '20%',
            bottom: 100
        },
           
    tooltip : {
        trigger: 'axis'
    },
        toolbox: {
        show: true,
        
        feature: {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
            
        }
    },

            xAxis : [
        {
            type : 'category',

            data :data1.map(function (str) {
                return str.replace(' ', '\n')
            })
        }
    ],
        yAxis: [
        {
            
            type: 'value'
            
        }

    ],
           series: [
                { 
                    type: 'line',
            smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
                
            },
                }
            ]
            },
options:[{

           title:{text: '实时盈亏',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data2}]
        },
{

           title:{text: '实时持仓',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data3}]
        },
        {

           title:{text: '净多持仓',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data5}]
        },
        {

           title:{text: '净多盈亏',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data4}]
        },
        {

           title:{text: '净空持仓',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data7}]
        },
        {

           title:{text: '净空盈亏',left:'center'},
            series:[{
                        smooth:true,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:data6}]
        },
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

<table class="table table-bordered">
   <h2 class="text-center">{{k}}</h2>

   <button type="button" class="btn btn-info" style="position:absolute;top:8%;right:5%"><a href={{url_for('logout')}}>回到首页</a></button>
   <thead>
   
      <tr>
      
         <th>时间</th>
         <th>价格</th>
         <th>动态盈亏</th>
         <th>净持仓</th>
         <th>手续费</th>
         <th>盈亏扣掉手续费</th>
         <th>净多头</th>
         <th>多头盈亏</th>
         <th>净空头</th>
         <th>空头盈亏</th>
         
    
      </tr>
      
   </thead>
   
   
   <tbody>
      <tr>
      {% for entry in entries%}
         <td>{{ entry.timedate|safe }}</td>
         <td>{{entry.price}}</td>
         <td>{{entry.result-entries[0].result}}</td>
         <td>{{entry.net}}</td>
         <td>{{entry.poundage-entries[0].poundage}}</td>
         <td>{{entry.pureresult-entries[0].pureresult}}</td>
         <td>{{entry.duonet}}</td>
         <td>{{entry.duomovement-entries[0].duomovement}}</td>
         <td>{{entry.kongnet}}</td>
         <td>{{entry.kongmovement-entries[0].kongmovement}}</td>
      </tr>
{%endfor%}
   </tbody>

</table>

</body>
</html>